import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { useRef } from 'react';
import { DeviceIdentifyItem } from './types';
import { getIdentifyDataList } from './service';
import RemoteSelect from '@/components/RemoteSelect';
import { getTenantList } from '@/pages/Tenant/Tenant/service';

export default () => {
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<DeviceIdentifyItem>[] = [
    {
      title: '所属用户',
      dataIndex: 'tenant_id',
      fixed: 'left',
      width: 165,
      onFilter: true,
      renderFormItem: () => (
        <RemoteSelect
          getPopupContainer={(triggerNode) => triggerNode.parentElement} // 保证选择菜单不会随着页面滚动
          fieldNames={{ key: 'id', value: 'id', label: 'name' }}
          request={() => getTenantList({})}
        />
      ),
    },
    {
      title: '设备号',
      dataIndex: 'dev_name',
      fixed: 'left',
      width: 110,
      ellipsis: true,
    },
    {
      title: '唯一识别码',
      dataIndex: 'reco_id',
      search: false,
      ellipsis: true,

      width: 90,
    },
    {
      title: '结果序列号',
      dataIndex: 'serial',
      search: false,
      ellipsis: true,

      width: 90,
    },
    {
      title: '触发类型',
      dataIndex: 'trigger_type',
      search: false,
      ellipsis: true,

      width: 80,
    },
    {
      title: '协议版本',
      dataIndex: 'protocol',
      search: false,
      ellipsis: true,

      width: 80,
    },
    {
      title: '视频通道号',
      dataIndex: 'chnlid',
      search: false,
      ellipsis: true,

      width: 90,
    },
    {
      title: 'ip地址',
      dataIndex: 'ip',
      search: false,
      width: 110,
      ellipsis: true,
    },
    {
      title: '设备sn',
      dataIndex: 'sn',
      search: false,
      ellipsis: true,

      width: 140,
    },
    {
      title: '报警状态',
      dataIndex: 'alarm_status',
      search: false,
      ellipsis: true,

      width: 80,
    },
    {
      title: '车身颜色',
      dataIndex: 'car_color',
      ellipsis: true,

      search: false,
      width: 80,
    },
    {
      title: '车辆类型',
      dataIndex: 'car_type',
      ellipsis: true,

      search: false,
      width: 80,
    },
    {
      title: '车型置信度',
      dataIndex: 'car_type_source',
      ellipsis: true,

      search: false,
      width: 90,
    },
    {
      title: '车头车尾信息',
      dataIndex: 'car_pos_pos',
      ellipsis: true,

      search: false,
      width: 100,
    },
    {
      title: '车位状态',
      dataIndex: 'parking_state',
      ellipsis: true,

      search: false,
      width: 80,
    },
    {
      title: '泊位id',
      dataIndex: 'zone_id',
      ellipsis: true,

      search: false,
      width: 100,
    },
    {
      title: '泊位号',
      dataIndex: 'zone_name',
      ellipsis: true,

      width: 100,
    },
    {
      title: '车辆序号',
      dataIndex: 'zone_index',
      search: false,
      ellipsis: true,

      width: 80,
    },
    {
      title: '区域类型',
      dataIndex: 'zone_type',
      search: false,
      ellipsis: true,

      width: 80,
    },
    {
      title: '车牌颜色',
      dataIndex: 'plate_color',
      search: false,
      ellipsis: true,

      width: 80,
    },
    {
      title: '车牌置信度',
      dataIndex: 'plate_confidence',
      search: false,
      ellipsis: true,

      width: 90,
    },
    {
      title: '车牌清晰度',
      dataIndex: 'plate_sharpness',
      search: false,
      ellipsis: true,

      width: 90,
    },
    {
      title: '车牌近期识别过',
      dataIndex: 'recent_plate',
      search: false,
      ellipsis: true,

      width: 120,
    },
    {
      title: '车牌号',
      dataIndex: 'plate',
      search: false,
      ellipsis: true,

      width: 100,
    },
    {
      title: '车牌类型',
      dataIndex: 'plate_type',
      search: false,
      ellipsis: true,

      width: 80,
    },
    {
      title: '识别对象状态',
      dataIndex: 'covered_event',
      search: false,
      ellipsis: true,

      width: 100,
    },
    {
      title: '识别组id',
      dataIndex: 'group_id',
      search: false,
      ellipsis: true,

      width: 80,
    },
    {
      title: '识别标志',
      dataIndex: 'reco_flag',
      search: false,
      ellipsis: true,

      width: 80,
    },
    {
      title: '识别id',
      dataIndex: 'group_reco_id',
      search: false,
      ellipsis: true,

      width: 80,
    },
    {
      title: '识别时间',
      dataIndex: 'reco_time',
      search: false,
      ellipsis: true,

      width: 180,
    },
    {
      title: '订单评分',
      dataIndex: 'order_score',
      search: false,
      ellipsis: true,

      width: 80,
    },
    {
      title: '订单状态',
      dataIndex: 'force_level_flag',
      search: false,
      ellipsis: true,

      width: 80,
    },
    {
      title: '重启触发',
      dataIndex: 'restart',
      search: false,
      ellipsis: true,

      width: 80,
    },
    {
      title: '识别结果类型',
      dataIndex: 'data_type',
      search: false,
      ellipsis: true,

      width: 100,
    },
    {
      title: '路段id',
      dataIndex: 'road_id',
      search: false,
      width: 180,
      ellipsis: true,
    },
    {
      title: '路段名',
      dataIndex: 'road_name',
      width: 130,
      ellipsis: true,
    },
    {
      title: '识别图片',
      dataIndex: 'img_url',
      search: false,
      ellipsis: true,
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable<DeviceIdentifyItem>
        dateFormatter="string"
        headerTitle="设备识别结果列表"
        columns={columns}
        actionRef={actionRef}
        cardBordered
        editable={{
          type: 'multiple',
        }}
        scroll={{ x: '210%' }}
        request={async (params) => {
          params.device_no = params.dev_name;
          params.dev_name = undefined;
          params.tenant_id = params.tenant_id?.id;
          params.space_name = params.zone_name;
          params.zone_name = undefined;
          params.page = params.current;
          const res = getIdentifyDataList(params);
          return res;
        }}
        pagination={{
          defaultPageSize: 10,
          size: 'default',
          showQuickJumper: true,
          showSizeChanger: true,
        }}
      />
    </PageHeaderWrapper>
  );
};
